$(function () {
    $('.content .items li').mouseenter(function () {
        $(this).children(".detail").animate({
            "top": "50px"
        }, 600);
    });
    $('.content .items li').mouseleave(function () {
        $(this).children(".detail").animate({
            "top": "350px"
        }, 600);
    });

    $(".input input").focus(function () {

        $(this).parent(".input").each(function () {
            $("label", this).css({
                "line-height": "18px",
                "font-size": "18px",
                "font-weight": "100",
                "top": "0px"
            })
            $(".spin", this).css({
                "width": "100%"
            })
            $(this).next("div").html(" ");
        });
    }).blur(function () {
        if (this.name == "name") {
            var username = $("#name").val();
            if (username == undefined || username == "") {
                $("#nameerror").html("用户名不能为空！")
            } else {
                $("#nameerror").html(" ");
            }
        }


        if (this.name == "pass") {
            var pass = $("#pass").val();
            if (pass == undefined || pass == "") {
                $("#passerror").html("密码不能为空！");
            } else {
                $("#passerror").html(" ");
            }
        }
    }).on('input', function (e) {
        $(".spin").css({
            "width": "0px"
        })
        var username = $("#name").val();
        var pass = $("#pass").val();

        if (username != undefined && username != "" && pass != undefined && pass != "") {
            $("#submit").removeAttr("disabled");
        }

        if (username != undefined && username != "" && pass != undefined && pass != "") {
            $("#submit").removeAttr("disabled");
            var button = $(".button");
            var pX = button.pageX,
                pY = button.pageY,
                oX = parseInt(button.left),
                oY = parseInt(button.top);
            button.append('<span class="click-efect x-' + oX + ' y-' + oY + '" style="margin-left:' + (pX - oX) + 'px;margin-top:' + (pY - oY) + 'px;"></span>')
            $('.x-' + oX + '.y-' + oY + '').animate({
                "width": "500px",
                "height": "500px",
                "top": "-250px",
                "left": "-250px"

            }, 600);
            button.addClass('active');
            $("#submit").css('color', 'white')
        } else {
            $(".click-efect").remove();
            $("#submit").css('color', '#ccc')
        }

    });

    $(".alt-2").click(function () {
        if (!$(this).hasClass('material-button')) {
            $(".shape").css({
                "width": "100%",
                "height": "100%",
                "transform": "rotate(0deg)"
            })

            setTimeout(function () {
                $(".overbox").css({
                    "overflow": "initial"
                })
            }, 600)

            $(this).animate({
                "width": "140px",
                "height": "140px"
            }, 500, function () {
                $(".box").removeClass("back");

                $(this).removeClass('active')
            });

            $(".overbox .title").fadeOut(300);
            $(".overbox .input").fadeOut(300);
            $(".overbox .button").fadeOut(300);

            $(".alt-2").addClass('material-buton');
        }

    })

    $(".material-button").click(function () {

        if ($(this).hasClass('material-button')) {
            setTimeout(function () {
                $(".overbox").css({
                    "overflow": "hidden"
                })
                $(".box").addClass("back");
            }, 200)
            $(this).addClass('active').animate({
                "width": "700px",
                "height": "700px"
            });

            setTimeout(function () {
                $(".shape").css({
                    "width": "50%",
                    "height": "50%",
                    "transform": "rotate(45deg)"
                })

                $(".overbox .title").fadeIn(300);
                $(".overbox .input").fadeIn(300);
                $(".overbox .button").fadeIn(300);
            }, 700)

            $(this).removeClass('material-button');

        }

        if ($(".alt-2").hasClass('material-buton')) {
            $(".alt-2").removeClass('material-buton');
            $(".alt-2").addClass('material-button');
        }

    });
});
$(function () {
    $("#submit").click(function () {
        var id = $("#name").val();
        var password = $("#pass").val();
        var role = $("input[checked=checked]").val();
        var loginFrom = {"id": id, "password": password, "role": role};


        if ((id != undefined || id != "") && (password != undefined || password != "")) {
            $.ajax({
                url: "/user/login",
                type: "POST",
                contentType: "application/json",
                data: JSON.stringify(loginFrom),
                dataType: "json",
                async: false,
                success: function (data) {
                    if (data.code == 200) {
                        $("#name").val("");
                        $("#pass").val("");
                        location.replace("/dayday/index.html");
                    } else {
                        alert("账号或密码错误！");
                    }
                },
                error: function (data) {
                    console.log(data.message);
                }
            })
        }

    })
    $(".radio").find('input').click(function () {
        $(this).parent('label').siblings('label').find('input').removeAttr('checked') && $(this).attr('checked', 'checked');
    })
})

